<template>
  <view class="create-wrap">
    <u-form :model="formData" :rules="rules" :error-type="['toast']" ref="uForm">
      <u-form-item :label-width="120" label="名称" prop="name" required>
        <u-input type="text" placeholder="请输入活动名称" v-model="formData.name" maxlength="50" :focus="true" />
      </u-form-item>
    </u-form>
    <u-button type="primary" :custom-style="{marginTop: '80rpx'}" @click="submit">提交</u-button>
  </view>
</template>

<script lang="ts">
/**
 * @file 新增活动
 * @author zhaiwanli
 */
import { Component, Mixins } from 'vue-property-decorator';
import { loginMixin } from '@/mixins';

@Component({})
export default class extends Mixins(loginMixin) {
  private formData = {
    name: ''
  };

  private rules = {
    name: [
      {
        required: true,
        message: '请输入活动名称😏',
        trigger: 'blur',
      },
      {
        min: 5,
        message: '名称最少5个字😏',
        trigger: ['change', 'blur'],
      },
    ]
  };

  get userInfo() {
    return this.$$store.userInfo;
  }

  onReady() {
		(this.$refs.uForm as any).setRules(this.rules);
	}

  private submit() {
    console.log(this.formData);

    (this.$refs['uForm'] as any).validate((valid: boolean) => {
      if (!valid) return

      wx.showLoading({title: '别急哦...', mask: true});

      // 调用云函数
      wx.cloud.callFunction({
        name: 'create_activity',
        data: {
          ...this.formData,
          creatorId: this.userInfo.id,
          seasonId: this.$$store.season._id
        }
      }).then((res: any) => {
        wx.hideLoading();

        console.log('[云函数] [create_activity] 调用成功: ', res.result);

        wx.navigateBack();
      }).catch(err => {
        wx.hideLoading();

        console.error('[云函数] [create_activity] 调用失败', err);
      });
    });
  }
};
</script>

<style lang="stylus" scoped>
.create-wrap
  min-height 100vh
  padding 40rpx 60rpx
  box-sizing border-box
  background #fff
</style>
